<template>
  <van-tabbar
    class="tabBar"
    :placeholder="true"
    :safe-area-inset-bottom="true"
    v-model="active"
    active-color="#b5262d"
    route
    fixed
    z-index="999999"
    inactive-color="#778899"
    v-show="!$route.meta.hidden"
  >
    <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/category" icon="apps-o">分类</van-tabbar-item>
    <van-tabbar-item replace to="/shopping" icon="photo-o">值得买</van-tabbar-item>
    <van-tabbar-item replace to="/shopCart" icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item replace to="/center" icon="user-o">个人</van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'TabBar'
})
</script>
<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)
</script>

<style lang="less" scoped>
:deep(.van-tabbar__placeholder) {
  :deep(.van-tabbar) {
    height: 50px;
    width: 375px;
  }
}
</style>
